<template>
  <div>
    <NormalForm pageTitle="个人SOP" :operateForm="queryForm" :formList="formList" @handleQuery="handleQuery" @handleReset="handleReset" />
    <div class="g-card">
      <div class="right-btn">
        <el-button type="primary" @click="goRoute" icon="el-icon-plus" v-hasPermi="['admin:sop:addOrUpdateTempTask']">创建任务</el-button>
      </div>
      <div style="padding: 0 20px 20px 20px">
        <el-table v-loading="loading" :data="tableList" style="width: 100%" height="475" @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="任务名称" align="center" prop="taskName" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="执行员工" prop="userName" align="center">
            <template slot-scope="{ row }">
              <template v-if="row.scrmPersonSopUserRels.length >= 3">
                <el-tooltip placement="top" title=" " width="300" height="36" trigger="hover" :content="userNameString">
                  <div>
                    <el-tag v-for="tag in row.scrmPersonSopUserRels" :key="tag.userId" type="info">
                      {{ tag.userName }}
                    </el-tag>
                  </div>
                </el-tooltip>
              </template>
              <template v-else>
                <el-tag v-for="tag in row.scrmPersonSopUserRels" :key="tag.userId" type="info">
                  {{ tag.userName }}
                </el-tag>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="createBy" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="createTime" :width="160">
          </el-table-column>
          <el-table-column label="状态" align="center" prop="status" width="160px">
            <template slot-scope="{ row, $index }">
              <div>
                <el-switch v-model="row.status" active-value="2" inactive-value="1" @change="switchChange($index, $event)">
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <div class="option-span">
                <el-button size="mini" type="text" @click="detailRoute(row.taskId)" v-hasPermi="['admin:sop:queryTaskdetail']">详情
                </el-button>
                <el-button size="mini" type="text" @click="editRoute(row.taskId)" v-hasPermi="['admin:sop:addOrUpdateTask']">编辑
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>
  </div>
</template>

<script>
import { queryTaskList, updateRuleStatus } from '@/api/communityOperating/personalSop'

export default {
  name: 'PersonalSop',
  data() {
    return {
      queryForm: {
        taskName: '',
        staffList: [],
        dateRange: [],
        createList: '',
        deptId: null,
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '任务名称',
          value: '',
          prop: 'taskName',
          type: 'INPUT',
          emunName: ''
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: ''
        },
        {
          label: '执行员工',
          value: [],
          prop: 'staffList',
          type: 'EMPLOYEE',
          emunName: ''
        },
        {
          label: '创建人',
          value: '',
          prop: 'createList',
          type: 'STAFF',
          emunName: ''
        },
        {
          label: '创建',
          value: [],
          prop: 'dateRange',
          type: 'DATE_RANGE',
          formate: 'yyyy-MM-dd',
          emunName: ''
        },
      ],
      total: 0,
      loading: false,
      tableList: [],
      userNameString: '',
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    mouseEnter(row) {
      let arr = []
      row.scrmPersonSopUserRels.forEach((str) => {
        arr.push(str.userName)
      })
      this.userNameString = arr.toString()
    },
    mouseLeave() {
      this.userNameString = ''
    },
    // 重置
    handleReset() {
      this.queryForm = {
        taskName: '',
        staffList: '',
        dateRange: [],
        createList: '',
        deptId: null,
        pageNum: 1,
        pageSize: 20,
      };
      this.queryTaskListFn()
    },
    // 搜索
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.queryTaskListFn();
    },
    queryTaskListFn() {
      let arr = []
      this.queryForm.staffList.forEach((item) => {
        arr = arr.concat(item)
      })
      let obj = {
        createList: this.queryForm.createList || [],
        staffList: arr,
        deptId: this.queryForm.deptId,
        startDate: this.queryForm.dateRange?.[0],
        endDate: this.queryForm.dateRange?.[1],
        taskName: this.queryForm.taskName,
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        sendEdition: '2',
      }
      this.loading = true
      queryTaskList(obj).then((res) => {
        if (res.code === 200) {
          this.tableList = res.rows
          this.total = res.total
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.queryTaskListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.queryTaskListFn()
    },
    // 新增规则
    goRoute() {
      this.$router.push({ name: 'CreateRules', query: { activeName: '2' } })
    },
    // 状态修改
    switchChange(index, event) {
      this.tableList[index].status = event
      let obj = {
        taskId: this.tableList[index].taskId,
        status: event,
      }
      updateRuleStatus(obj).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.data)
        }
      })
    },
    // 详情
    detailRoute(id) {
      this.$router.push({
        name: 'DetailRules',
        query: {
          taskId: id,
          fromDetail: '1',
          activeName: '2',
        },
      })
    },
    // 编辑
    editRoute(id) {
      this.$router.push({
        name: 'EditRules',
        query: {
          taskId: id,
          fromDetail: null,
          activeName: '2',
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../styles/base.scss';
::v-deep .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

::v-deep .el-tooltip {
  overflow: hidden; //超出隐藏
  white-space: nowrap; //不折行
  text-overflow: ellipsis; //溢出显示省略号
}
</style>
